<!-- 未完成 -->
<!--
表单项配置：
items: [
  {

  }
]
-->
<template>
  <el-form ref="form" class="form" :model="form" :label-width="labelWidth" label-suffix=":" size="small">
    <el-row :gutter="10">
      <el-col :span="8">
        <el-form-item label="输入框">
          <el-input v-model="form1.input"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="时间选择">
          <el-date-picker type="date" v-model="form1.date"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="单选框">
          <el-radio-group v-model="form1.radio">
            <el-radio label="单选1"></el-radio>
            <el-radio label="单选2"></el-radio>
            <el-radio label="单选3"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-form-item label="多选框">
          <el-checkbox-group v-model="form1.checkGroup">
            <el-checkbox label="选择1"></el-checkbox>
            <el-checkbox label="选择2"></el-checkbox>
            <el-checkbox label="选择3"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="下拉框">
          <el-select v-model="form1.select">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="开关">
          <el-switch v-model="form1.switch"></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-form-item label="省市区级联">
          <el-cascader v-model="form1.cascader" :options="options" :props="{multiple: true}" collapse-tags clearable></el-cascader>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="submit">取消</el-button>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
  export default {
    name: "queryForm",
    props: {
      form: {
        type: Object,
        default: {},
        desc: '表单的每个表单项的值'
      },
      items: {
        type: Array,
        default: [
          {
            type: 'input', // input-输入框，date-日期，dateRange-范围时间，dict-下拉，radio-单选，checkbox-多选，switch-开关，remoteSelect-远程搜索
            label: '', // label内容
            show: true, // 是否显示
            required: true, // 是否必填
            disabled: true, // 是否可用
            readonly: true, // 是否只读
            options: { // 表单项未定义但需要使用该属性的，放在这里，例如传入`options = '{ type: "textarea" }'`的时候,input会变成textArea

            },
            events: {

            },
            watch: {

            },
          }
        ],
        desc: '表单项，包含每个表单项的配置'
      },
      labelWidth: {
        type: String,
        default: '120px',
        desc: 'label的宽度，字符串格式，需要带单位'
      }
    }
  }
</script>

<style scoped>
  .form .el-input,
  .form .el-select,
  .form .el-cascader{
    width: 100%;
  }
</style>
